<template>
  <div>
    <el-card shadow="never">
      <header-title title="客户管理列表"></header-title>
    </el-card>
    <el-card shadow="never">
      <div>
        客户名称: <el-input v-model="name" clearable placeholder="请输入内容" size="small" style="margin: 0 15px 0 15px;width: 200px;"></el-input>
        是否注册: <el-select v-model="registered" @change="changeRegistered" placeholder="请选择" size="small" style="margin: 0 15px 0 15px;width: 200px;">
          <el-option :key="-1" label="全部" :value="-1"></el-option>
          <el-option :key="0" label="未注册" :value="0"></el-option>
          <el-option :key="1" label="已注册" :value="1"></el-option>
        </el-select>
        <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
      </div>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="membershipData" v-loading="loading" style="width: 100%">
          <el-table-column prop="name" label="客户名称"></el-table-column>
          <el-table-column prop="sex" label="性别"></el-table-column>
          <el-table-column prop="mobile" label="手机号码"></el-table-column>
          <el-table-column prop="wxNickName" label="微信昵称"></el-table-column>
          <el-table-column prop="registered" label="是否注册"></el-table-column>
          <el-table-column prop="createdAt" label="创建时间"></el-table-column>
          <el-table-column prop="isWechatFlow" label="是否关注"></el-table-column>
          <el-table-column prop="buyerUserId" label="支付宝用户id"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="details(scope.row)" type="text" style="color:#71dc80;">查看详情</el-button>
            </template>
          </el-table-column>
          <div slot="empty"><img src="../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-pagination
          :page-size="perPage"
          :current-page="page"
          :total="total"
          @current-change="changeMembershipPage"
          style="margin-top: 15px;"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
export default {
  name: 'MembershipList',
  components: {
    HeaderTitle
  },
  data(){
    return {
      loading: true,
      name: '',
      registered: -1,
      membershipData: [],
      perPage: 10, // 每页显示10条
      page: 1, // 当前页
      total: 0,
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.getMembershipList(this.name, this.registered, this.perPage, this.page)
    }
  },
  mounted(){
    this.getMembershipList(this.name, this.registered, this.perPage, this.page)
  },
  methods:{
    changeRegistered(val){
      this.registered = val
    },
    // 获取客户列表
    getMembershipList(name, registered, perPage, page){
      this.$store.dispatch("membershipList/fetchMembershipList", {name, registered, perPage, page}).then(
        data => {
          this.loading = false
          this.membershipData = data.items
          this.total = data.total
        }
      ).catch(err => {
        this.loading = false
        this.membershipData = []
        this.total = 0
      })
    },
    changeMembershipPage(num){
      this.page = num
      this.getMembershipList(this.name, this.registered, this.perPage, this.page)
    },
    search(){
      this.page = 1
      this.getMembershipList(this.name, this.registered, this.perPage, this.page)
    },
    details(row){
      const membershipId = row.membershipId
      this.$router.push({
        path: `membershipList/membershipDetail/${membershipId}`,
        query: {
          membershipDetails: row
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
</style>
